<template>
	<view>
		<custom-head-vue
			ref="refCustomHead"
			 title="Robot"
			 :isShowBack="false"
			 :isShowRightMenu="true"
			 @openOrCloseDrawer="openOrCloseDrawer"
			 @rightClick="rightClick"
			 :isShowRightTxt="true"
			 :isShowImg="true"
		></custom-head-vue>
		<view class="content-area-bg"
			:class="currentViewType==VIEW_TYPE_CONSTANT.ROBOT_VIEW_TYPE_TEACH_WELDING?'padd-bottom':''"
			>
			<view v-if="currentViewType==VIEW_TYPE_CONSTANT.ROBOT_VIEW_TYPE_TEACH_TEMPLATE">
				<robotTeachVue></robotTeachVue>
			</view>
			
			<view v-if="currentViewType==VIEW_TYPE_CONSTANT.ROBOT_VIEW_TYPE_HAND_TEMPLATE">
				<robotHandTemplate
					:stickyTop="drawerTop"
					:currentTemplateTaskId="handTemplateTaskId"
					@changeToProcessEditView="changeToProcessEditView"
					:showCurrentPageFrom="showHandTemplatePageFrom"
					:processNo="handTemplagePageProccessId"
					:processName="handTemplagePageProccessName"
				 ></robotHandTemplate>
			</view>
			
			<view v-if="currentViewType==VIEW_TYPE_CONSTANT.ROBOT_VIEW_TYPE_TEACH_WELDING">
				<robotTeachWeldingVue
					:stickyTop="drawerTop"
					@changeToProcessEditView="changeToProcessEditView"
					:showCurrentPageFrom="showTeachWeldingPageFrom"
					:processNo="handTemplagePageProccessId"
					:processName="handTemplagePageProccessName"
				></robotTeachWeldingVue>
			</view>
			
			<view v-if="currentViewType==VIEW_TYPE_CONSTANT.ROBOT_VIEW_TYPE_WELDING_TODO">
				<robotWeldingTodoVue></robotWeldingTodoVue>
			</view>
			
			<view v-if="currentViewType==VIEW_TYPE_CONSTANT.ROBOT_VIEW_TYPE_PROCESS_EDIT">
				<robotProcessEditVue
					:showCurrentPageFrom="showProcessEditPageFrom"
					:processNumber="processNumberId"
					@notifyIndexShowHandTemSonView="notifyIndexShowHandTemSonView"
					@notifyIndexShowTeachTemSonView="notifyIndexShowTeachTemSonView"
				></robotProcessEditVue>
			</view>
			
			<view v-if="currentViewType==VIEW_TYPE_CONSTANT.ROBOT_VIEW_TYPE_MULTI_CHANNEL">
				<robotMultiChannelVue
					:stickyTop="drawerTop"
				></robotMultiChannelVue>
			</view>
			
			<view v-if="currentViewType==VIEW_TYPE_CONSTANT.BOROT_VIEW_ALARM_HANDLE">
				<robotAlarmHandleVue></robotAlarmHandleVue>
			</view>
			
			<view v-if="currentViewType==VIEW_TYPE_CONSTANT.ROBOT_VIEW_TYPE_NETWORK_FUN">
				<robotNetworkFunVue
					@notifyIndexCustomHeadGetLogoImg="notifyIndexCustomHeadGetLogoImg"
				></robotNetworkFunVue>
			</view>
			
			<view v-if="currentViewType==VIEW_TYPE_CONSTANT.ROBOT_VIEW_TYPE_SYS_SETTING">
				<robotSysSettingVue></robotSysSettingVue>
			</view>
		</view>
		
		<!--左侧菜单弹框布局-->
		<view class="popup-menu-drawer" :class="{show: showMenuDrawer}" :style="{top: drawerTop+'px'}">
			<scroll-view scroll-y="true" class="search-buttons" :style="{height: drawerHeight+'px'}">
				<view class="menu-item-bg" v-for="(item, index) in menuItemList" :key="index" @click="chooseMenuToChangeView(item, index)">
					<view class="menu-item-flag" :class="currentViewType==item.menuViewType?'choose-flag-bg':'def-bg'"></view>
					<view class="menu-item-info" :class="currentViewType==item.menuViewType?'choose-info-bg':'def-bg'">
						<view class="info-left">
							<image class="menu-icon" :src="item.menuIconSrc"></image>
							<view class="menu-name">{{item.menuName}}</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 左侧菜单弹框的遮罩层 -->
		<view class="popup-menu-overlay" v-if="showMenuDrawer" :style="{top: drawerTop+'px'}" @click="hideSearchDrawer">
		</view>
	</view>
</template>

<script>
	import localStores from '@/common/localStore.js'
	import * as Constants from '@/common/constants.js';
	import customHeadVue from '../../components/custom-head.vue';
	import robotTeachVue from '../../components/robot-teach.vue';
	import robotHandTemplate from '../../components/robot-hand-template.vue';
	import robotTeachWeldingVue from '../../components/robot-teach-welding.vue';
	import robotWeldingTodoVue from '../../components/robot-welding-todo.vue';
	import robotProcessEditVue from '../../components/robot-process-edit.vue';
	import robotSysSettingVue from '../../components/robot-sys-setting.vue';
	import robotMultiChannelVue from '../../components/robot-multi-channel.vue';
	import robotAlarmHandleVue from '../../components/robot-alarm-handle.vue';
	import robotNetworkFunVue from '../../components/robotNetworkFun.vue';
	import robotBottomMoveVue from '../../components/robot-bottom-move.vue';
	export default {
		components: {
			customHeadVue,
			robotTeachVue,
			robotHandTemplate,
			robotTeachWeldingVue,
			robotWeldingTodoVue,
			robotProcessEditVue,
			robotMultiChannelVue,
			robotAlarmHandleVue,
			robotNetworkFunVue,
			robotSysSettingVue,
			robotBottomMoveVue
		},
		data() {
			return {
				/**
				 * 菜单：需要切换的子组件类型
				 */
				VIEW_TYPE_CONSTANT: {
					/**
					 * 示教面板子组件
					 */
					ROBOT_VIEW_TYPE_TEACH_TEMPLATE: 1,

					/**
					 * 轨迹运动子组件
					 */
					ROBOT_VIEW_TYPE_TRACK_SPORT: 2,

					/**
					 * 自动模板子组件
					 */
					ROBOT_VIEW_TYPE_AUTO_TEMPLATE: 3,

					/**
					 * 手动模板子组件
					 */
					ROBOT_VIEW_TYPE_HAND_TEMPLATE: 4,
					
					/**
					 * 示教焊接子组件
					 */
					ROBOT_VIEW_TYPE_TEACH_WELDING: 5,
					
					/**
					 * 焊接执行子组件
					 */
					ROBOT_VIEW_TYPE_WELDING_TODO: 6,
					
					/**
					 * 辅助点位子组件
					 */
					ROBOT_VIEW_TYPE_ASSISTANT_POINT: 7,
					
					/**
					 * 机器书写子组件
					 */
					ROBOT_VIEW_TYPE_MACHINE_WRITING: 8,
					
					/**
					 * 工艺测试子组件
					 */
					ROBOT_VIEW_TYPE_PROCESS_TEST: 9,
					
					/**
					 * 工艺编辑子组件
					 */
					ROBOT_VIEW_TYPE_PROCESS_EDIT: 10,
					
					/**
					 * 多层多道子组件
					 */
					ROBOT_VIEW_TYPE_MULTI_CHANNEL: 11,
					
					/**
					 * 网络功能子组件
					 */
					ROBOT_VIEW_TYPE_NETWORK_FUN: 12,

					/**
					 * 系统设置子组件
					 */
					ROBOT_VIEW_TYPE_SYS_SETTING: 13,

					/**
					 * 告警处理
					 */
					BOROT_VIEW_ALARM_HANDLE: 14
				},

				menuItemList: [],
				
				/**
				 * 状态栏和标题栏高度：给左侧菜单栏设置top值，以及有bottomMoveView时设置top值防止滑动超出顶部无法点击编辑
				 */
				drawerTop: 84,
				/**
				 * 是否显示菜单弹框
				 */
				showMenuDrawer: false,
				/**
				 * 菜单弹框的高度
				 */
				drawerHeight: 0,
				
				/**
				 * 当前显示的子组件类型
				 */
				currentViewType: -1,
				
				/**
				 * 显示 工艺编辑 子组件的操作类型
				 */
				showProcessEditPageFrom: 0,
				processNumberId: -1,
				/**
				 * 显示 手动模版 子组件的操作类型
				 */
				showHandTemplatePageFrom: 0,
				showTeachWeldingPageFrom: 0,
				/**
				 * 工艺新增成功后需要传递给手动模版的工艺号ID
				 */
				handTemplagePageProccessId: -1,
				/**
				 * 工艺新增成功后需要传递给手动模版的工艺名称
				 */
				handTemplagePageProccessName: "",
				/**
				 * 修改模板是，传递过来的模板ID
				 */
				handTemplateTaskId:  ''
			}
		},
		onLoad() {
			console.log("index onLoad")
			localStores.saveHandTemplateViewEditingData(null)
			localStores.saveTeachWeldingViewEditingData(null)
			let httpIp = localStores.getHttpIp()
			let httpPort = localStores.getHttpPort()
			let httpUrl = localStores.getHttpRequestUrl()
			if (httpIp && httpIp != "" && httpPort && httpPort != 0 && httpUrl && httpUrl != "") {
				this.currentViewType = this.VIEW_TYPE_CONSTANT.ROBOT_VIEW_TYPE_HAND_TEMPLATE
			} else {
				this.currentViewType = this.VIEW_TYPE_CONSTANT.ROBOT_VIEW_TYPE_NETWORK_FUN
			}
			// this.currentViewType=this.VIEW_TYPE_CONSTANT.ROBOT_VIEW_TYPE_MULTI_CHANNEL
			this.initMenuList()
			const res = uni.getSystemInfoSync();
			let statusBarHeight = res.statusBarHeight;
			this.drawerTop = statusBarHeight + uni.upx2px(88);
			this.drawerHeight = res.windowHeight - this.drawerTop - 40
		},
		mounted() {
			console.log("index mounted")
			let _this = this
			uni.$on("noticeIndexShowHandTemplateViewFromTemplateListView", function(data, index) {
				// 模板列表页面点击修改后切换到手动模板界面进行修改
				console.log("--模板列表页面点击修改后切换到手动模板界面进行修改-->" + JSON.stringify(data) + "-->" + index)
				_this.currentViewType = _this.VIEW_TYPE_CONSTANT.ROBOT_VIEW_TYPE_HAND_TEMPLATE
				_this.showHandTemplatePageFrom = Constants.INDEX_SHOW_HAND_TEMPALTE_FROM_TEMPLATE_LIST_MODIFY
				_this.handTemplateTaskId = data.templateTaskId
			})
			
			uni.$on("noticeHandTemplateChooseProcessBack", function(data, index) {
				console.log("从手动模板进入到工艺列表，选择工艺后（如果做过修改操作，index会切换到工艺编辑页面）切换到手动模板页面")
				_this.currentViewType = _this.VIEW_TYPE_CONSTANT.ROBOT_VIEW_TYPE_HAND_TEMPLATE
				_this.showHandTemplatePageFrom = Constants.INDEX_SHOW_HAND_TEMPALTE_FROM_PROCESS_EDIT
				_this.handTemplagePageProccessId = data.number
				_this.handTemplagePageProccessName = data.name
			})
			uni.$on("noticeIndexShowProcessEditViewFromProcessListView", function(data, index) {
				console.log("从手动模板进入到工艺列表，修改工艺，index要切换到工艺编辑页面")
				_this.currentViewType = _this.VIEW_TYPE_CONSTANT.ROBOT_VIEW_TYPE_PROCESS_EDIT
				_this.showProcessEditPageFrom = Constants.INDEX_SHOW_PROCESS_EDIT_FROM_PROCESS_LIST_MODIFY
				_this.processNumberId = data.number
			})
			
			uni.$on("noticeTeachWeldingChooseProcessBack", function(data, index) {
				console.log("从示教焊接进入到工艺列表，选择工艺后（如果做过修改操作，index会切换到工艺编辑页面）切换到示教焊接页面")
				_this.currentViewType = _this.VIEW_TYPE_CONSTANT.ROBOT_VIEW_TYPE_TEACH_WELDING
				_this.showTeachWeldingPageFrom = Constants.INDEX_SHOW_HAND_TEMPALTE_FROM_PROCESS_EDIT
				_this.handTemplagePageProccessId = data.number
				_this.handTemplagePageProccessName = data.name
			})
			uni.$on("noticeIndexShowProcessEditViewFromProcessListViewRootTeachWelding", function(data, index) {
				console.log("从示教焊接进入到工艺列表，修改工艺，index要切换到工艺编辑页面")
				_this.currentViewType = _this.VIEW_TYPE_CONSTANT.ROBOT_VIEW_TYPE_PROCESS_EDIT
				_this.showProcessEditPageFrom = Constants.INDEX_SHOW_PROCESS_EDIT_FROM_PROCESS_LIST_MODIFY_BY_TEACH_WELDING
				_this.processNumberId = data.number
			})
		},
		onShow() {
			console.log("index onShow")
		},
		onHide() {
			console.log("index onHide")
		},
		onUnload() {
			console.log("index onUnload")
		},
		destroyed() {
			console.log("index destroyed")
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			
			initIndexViewData() {
				this.showProcessEditPageFrom = 0
				this.processNumberId = -1
				this.showHandTemplatePageFrom = 0
				this.showTeachWeldingPageFrom = 0
				this.handTemplagePageProccessId = -1
				this.handTemplagePageProccessName = ""
				this.handTemplateTaskId = ''
			},

			initMenuList() {
				this.menuItemList = [
					{
						menuViewType: this.VIEW_TYPE_CONSTANT.ROBOT_VIEW_TYPE_TEACH_TEMPLATE,
						menuIconSrc: "/static/robot/menu_teach_template.png",
						menuName: "示教面板"
					},
					{
						menuViewType: this.VIEW_TYPE_CONSTANT.ROBOT_VIEW_TYPE_TRACK_SPORT,
						menuIconSrc: "/static/robot/menu_track_sport.png",
						menuName: "轨迹运动"
					},
					{
						menuViewType: this.VIEW_TYPE_CONSTANT.ROBOT_VIEW_TYPE_AUTO_TEMPLATE,
						menuIconSrc: "/static/robot/menu_auto_template.png",
						menuName: "自动模板"
					},
					{
						menuViewType: this.VIEW_TYPE_CONSTANT.ROBOT_VIEW_TYPE_HAND_TEMPLATE,
						menuIconSrc: "/static/robot/menu_hand_template.png",
						menuName: "手动模板"
					},
					{
						menuViewType: this.VIEW_TYPE_CONSTANT.ROBOT_VIEW_TYPE_TEACH_WELDING,
						menuIconSrc: "/static/robot/menu_teach_welding.png",
						menuName: "示教焊接"
					},
					{
						menuViewType: this.VIEW_TYPE_CONSTANT.ROBOT_VIEW_TYPE_WELDING_TODO,
						menuIconSrc: "/static/robot/menu_welding_todo.png",
						menuName: "焊接执行"
					},
					{
						menuViewType: this.VIEW_TYPE_CONSTANT.ROBOT_VIEW_TYPE_ASSISTANT_POINT,
						menuIconSrc: "/static/robot/menu_point.png",
						menuName: "辅助点位"
					},
					{
						menuViewType: this.VIEW_TYPE_CONSTANT.ROBOT_VIEW_TYPE_MACHINE_WRITING,
						menuIconSrc: "/static/robot/menu_machine_writing.png",
						menuName: "机器书写"
					},
					{
						menuViewType: this.VIEW_TYPE_CONSTANT.ROBOT_VIEW_TYPE_PROCESS_TEST,
						menuIconSrc: "/static/robot/menu_process_test.png",
						menuName: "工艺测试"
					},
					{
						menuViewType: this.VIEW_TYPE_CONSTANT.ROBOT_VIEW_TYPE_PROCESS_EDIT,
						menuIconSrc: "/static/robot/menu_process_edit.png",
						menuName: "工艺编辑"
					},
					{
						menuViewType: this.VIEW_TYPE_CONSTANT.ROBOT_VIEW_TYPE_MULTI_CHANNEL,
						menuIconSrc: "/static/robot/menu_multi_channel.png",
						menuName: "多层多道"
					},
					{
						menuViewType: this.VIEW_TYPE_CONSTANT.BOROT_VIEW_ALARM_HANDLE,
						menuIconSrc: "/static/robot/menu_alarm_handle.png",
						menuName: "告警清除"
					},
					{
						menuViewType: this.VIEW_TYPE_CONSTANT.ROBOT_VIEW_TYPE_NETWORK_FUN,
						menuIconSrc: "/static/robot/menu_network_fun.png",
						menuName: "网络功能"
					},
					{
						menuViewType: this.VIEW_TYPE_CONSTANT.ROBOT_VIEW_TYPE_SYS_SETTING,
						menuIconSrc: "/static/robot/menu_sys_setting.png",
						menuName: "系统设置"
					}
				]
			},

			/**
			 * 自定义标题头的菜单点击事件：显示/隐藏菜单弹框
			 */
			openOrCloseDrawer() {
				this.showMenuDrawer = !this.showMenuDrawer
			},
			/**
			 * 菜单弹框的遮盖层点击事件：关闭菜单弹框
			 */
			hideSearchDrawer() {
				this.showMenuDrawer = false
			},
			/**
			 * 主动点击菜单的item，切换显示子组件
			 * @param {Object} item
			 * @param {Object} index
			 */
			chooseMenuToChangeView(item, index) {
				if (this.currentViewType != item.menuViewType) {
					this.currentViewType = item.menuViewType
					this.showMenuDrawer = false
					this.initIndexViewData()
				}
			},
			
			/**
			 * 自定义标题头的跳转模版列表事件
			 */
			rightClick() {
				uni.navigateTo({
					url: "/pages/robot/weldingTemplate"
				})
			},
			
			/**
			 * 子组件手动模版、示例焊接中点击“工艺定制”时，传递的方法
			 * 通知父组件也就是当前index显示工艺编辑子组件
			 * @param {Object} showProcessEditFrom 表示显示“工艺编辑”子组件类型：默认从菜单弹框中点击切换“工艺编辑”子组件
			 */
			changeToProcessEditView(showProcessEditFrom) {
				console.log("showProcessEditFrom-->" + showProcessEditFrom)
				this.showProcessEditPageFrom = showProcessEditFrom
				this.currentViewType = this.VIEW_TYPE_CONSTANT.ROBOT_VIEW_TYPE_PROCESS_EDIT
			},
			
			/**
			 * 从手动模板的工艺定制进入的工艺编辑，新增后的回调
			 * 工艺编辑新增成功后，通知父组件切换到手动模版组件并将工艺新增成功时带的数据传到手动模版中
			 * @param {Object} showHandTemplateFrom 显示 手动模版 子组件的操作类型
			 * @param {Object} sendParam 工艺新增成功后传递的数据
			 */
			notifyIndexShowHandTemSonView(showHandTemplateFrom, sendParam) {
				this.showHandTemplatePageFrom = showHandTemplateFrom
				this.handTemplagePageProccessId = sendParam.processId
				this.handTemplagePageProccessName = sendParam.processName
				this.currentViewType = this.VIEW_TYPE_CONSTANT.ROBOT_VIEW_TYPE_HAND_TEMPLATE
			},
			
			/**
			* 从示教焊接的工艺定制进入的工艺编辑，新增后的回调
			* 工艺编辑新增成功后，通知父组件切换到示教焊接组件并将工艺新增成功时带的数据传到示教焊接中
			* @param {Object} showHandTemplateFrom 显示 示教焊接 子组件的操作类型
			* @param {Object} sendParam 工艺新增成功后传递的数据
			 */
			notifyIndexShowTeachTemSonView(showHandTemplateFrom, sendParam) {
				this.showTeachWeldingPageFrom = showHandTemplateFrom
				this.handTemplagePageProccessId = sendParam.processId
				this.handTemplagePageProccessName = sendParam.processName
				this.currentViewType = this.VIEW_TYPE_CONSTANT.ROBOT_VIEW_TYPE_TEACH_WELDING
			},
			
			/**
			 * 改变HTTP地址后重新请求logoImg
			 */
			notifyIndexCustomHeadGetLogoImg() {
				this.$refs.refCustomHead.getLogoUrl()
			},
		}
	}
</script>

<style>
	page {
		background-color: #1e40af;
	}
</style>
<style lang="scss" scoped>

	.content-area-bg {
		width: 100%;
		// height: 500rpx;
	}
	
	.padd-bottom {
		padding-bottom: 100rpx;
	}

	.bottom-move-bg {
		// margin-top: 20rpx;
	}

	.popup-menu-drawer {
		position: fixed;
		left: -100%;
		width: 50%;
		height: 100%;
		background-color: #3b4b66;
		z-index: 200;
		transition: all 0.3s;
		padding: 20px 0 80rpx 0;
		box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);

		&.show {
			left: 0;
		}

		.search-buttons {
			// height: 1800rpx;
			
			.menu-item-bg {
				display: flex;
				align-items: center;
				height: 120rpx;
			}

			.menu-item-flag {
				width: 10rpx;
				height: 100%;
			}

			.choose-flag-bg {
				background-color: #Facc15;
			}

			.choose-info-bg {
				background-color: #2563eb;
			}

			.def-bg {
				background-color: #3b4b66;
			}

			.menu-item-info {
				display: flex;
				align-items: center;
				padding-left: 20rpx;
				flex: 1;
				height: 100%;

				.info-left {
					display: flex;
					align-items: center;

					.menu-icon {
						width: 48rpx;
						height: 48rpx;
						margin-right: 10rpx;
					}

					.menu-name {
						color: #FFFFFF;
						font-size: 32rpx;
					}
				}
			}
		}
	}

	.popup-menu-overlay {
		position: fixed;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 150;
	}
	
	.confirm-btn-bg {
		position: fixed;
		bottom: 0;
		right: 0;
		left: 0;
		padding: 0 20px 20px;
		background-color: #1e40af;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 90;
	}
	.confirm-btn-in-bg {
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 1;
		padding: 20rpx 0;
		flex: 1;
		border-radius: 16rpx;
		color: #FFFFFF;
		text-align: center;
		background-color: #3b82f6;
		
		image {
			width: 40rpx;
			height: 40rpx;
		}
		.btn-txt {
			font-size: 36rpx;
			margin-left: 20rpx;
			color: #FFFFFF;
		}
	}
</style>